/* eslint-disable object-shorthand */
/* eslint-disable no-unused-vars */
import classNames from 'classnames'
import React, { memo } from 'react'
import { FormFeedback, Input, Label } from 'reactstrap'
import PropTypes from 'prop-types'
import { HelpCircle } from 'react-feather'
function FormGroupElement({
  labelClassName,
  label,
  required,
  autoFocus,
  inputType,
  inputName,
  placeholder,
  formikTouched,
  formikError,
  defaultValue,
  formGroupClassName,
  inputClassName,
  style,
  formikTouchedClass,
  formikErrorClass,
  children,
  onChange,
  accept,
  helpCircle,
  ...props
}) {
  return (
    <div className={`mb-1  ${formGroupClassName}`}>
      {label && (
        <div className="d-flex align-items-center form-label pl-1">
          {required && <div className="required-dot" />}
          <Label
            className={classNames({
              [labelClassName]: labelClassName,
              'mb-0': true
            })}
            htmlFor={inputName}
          >
            {label}
            <span className="pl-1">
              {helpCircle && <HelpCircle size={13} color="#000" />}
            </span>
          </Label>
        </div>
      )}
      <Input
        autoFocus={autoFocus}
        type={inputType}
        name={inputName || ''}
        style={style}
        id={inputName || ''}
        defaultValue={defaultValue}
        placeholder={placeholder}
        onChange={onChange}
        accept={accept}
        className={classNames({
          [inputClassName]: inputClassName,
          'is-invalid':
            `${formikTouched || formikTouchedClass || ''}` &&
            `${formikError || formikErrorClass || ''}`
        })}
        {...props}
      >
        {children}
      </Input>
      {`${formikTouched || ''}` && `${formikError || ''}` ? (
        <FormFeedback className="pl-1">{formikError}</FormFeedback>
      ) : null}
    </div>
  )
}

FormGroupElement.propTypes = {
  labelClassName: PropTypes.string,
  label: PropTypes.string,
  required: PropTypes.bool,
  autoFocus: PropTypes.bool,
  inputType: PropTypes.string,
  inputName: PropTypes.string,
  placeholder: PropTypes.string,
  formikTouched: PropTypes.bool,
  formikError: PropTypes.string,
  defaultValue: PropTypes.string,
  style: PropTypes.object,
  formGroupClassName: PropTypes.string,
  inputClassName: PropTypes.string,
  formikTouchedClass: PropTypes.string,
  formikErrorClass: PropTypes.string,
  children: PropTypes.any,
  onChange: PropTypes.func,
  accept: PropTypes.string,
  extraClass: PropTypes.string
}

export default memo(FormGroupElement)
